<template>
	<div v-loading="loading" class="vip-card-list" element-loading-text="加载中">
		<!-- 头部 -->
		<div class="app-main-content-box">
			<div class="app-main-top-box">
				<div class="title">会员卡管理</div>
				<div>
					<el-button
						v-if="!$store.getters.banBtnList.includes('BTN_ADD_MEMEBR_CATEGORY')"
						type="primary"
						size="medium"
						round
						@click="openEditCardBasic({ type: 'add', cardOrder: list.length + 1 })"
					>
						新增会员卡
					</el-button>
					<el-button v-if="!$store.getters.banBtnList.includes('BTN_MEMBER_CATEGORY_EDIT')" size="medium" round @click="openDialogOrder">卡排序</el-button>
				</div>
			</div>
			<div class="app-main-tips-box">
				<div class="title">
					<i class="el-icon-warning" />
					会员卡类型说明
				</div>
				<ul>
					<li>1.会员卡类型可以帮助商家建立会员付费会员体系，不同卡类型的会员，享有不同权益，使会员感知专有身份，有助于增强会员粘性、忠诚度，提高营收。</li>
					<li>2.系统开通后会初始化一张初始会员卡，你可以继续创建多张会员卡。</li>
					<li>3.面对市场竞争愈加强烈，付费会员可以稳定用户人群，留住高价值的忠诚顾客。</li>
				</ul>
			</div>
		</div>

		<!-- 内容区域 -->
		<div v-for="(item, index) in list" :key="index" class="card app-main-content-box clearfix">
			<!-- 左边 卡面 名称 状态 -->
			<div class="card-box fl">
				<div class="card-name">{{ item.category.categoryName }}</div>
				<div class="card-img"><img :src="fileBaseUrl + item.category.cardImage" alt /></div>
				<div class="card-status">
					<svg-icon icon-class="s-i-dot" :class="item.category.status ? 'app-text-color-success' : 'app-text-color-danger'" />
					<span>{{ item.category.status ? '已启用' : '已停用' }}</span>
				</div>
				<el-button-group class="btn-group">
					<el-button
						v-if="!$store.getters.banBtnList.includes('BTN_MEMBER_CATEGORY_EDIT')"
						size="mini"
						round
						class="app-text-color-primary"
						@click="openEditCardBasic({ type: 'edit', id: item.category.id, name: item.category.categoryName, instructions: item.category.instructions })"
					>
						编辑
					</el-button>
					<el-button
						v-if="!$store.getters.banBtnList.includes('BTN_MEMBER_CATEGORY_EDIT')"
						size="mini"
						round
						@click="openEditCardAward({ type: 'edit', id: item.category.id, name: item.category.categoryName })"
					>
						开卡奖励
					</el-button>
					<el-button
						v-if="!$store.getters.banBtnList.includes('BTN_MEMBER_CATEGORY_EDIT')"
						size="mini"
						round
						@click="openEditCardRights({ type: 'edit', id: item.category.id, name: item.category.categoryName, privilege: item.category.privilege })"
					>
						权益设置
					</el-button>
					<el-button
						v-if="!$store.getters.banBtnList.includes('BTN_MEMBER_CATEGORY_PAUSE')"
						size="mini"
						:style="{
							background: index === 0 ? '#eee' : '',
							color: index === 0 ? '#999' : ''
						}"
						round
						@click="index !== 0 && changeStatus(item.category)"
					>
						{{ item.category.status ? '暂停卡' : '启用卡' }}
					</el-button>
					<el-button
						v-if="!$store.getters.banBtnList.includes('BTN_MEMBER_CATEGORY_DELETE')"
						size="mini"
						:style="{
							background: index === 0 ? '#eee' : '',
							color: index === 0 ? '#999' : 'red'
						}"
						round
						@click="index !== 0 && del(item.category)"
					>
						删除卡
					</el-button>
				</el-button-group>
			</div>

			<!-- 右边 卡说明 -->
			<div class="card-tips">
				<el-row :gutter="30">
					<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
						<el-card>
							<app-main-sub-title title="使用说明：" />
							<ul class="instructions">
								<li v-for="(instructionsArrayItem, instructionsArrayIndex) in instructionsArray[index]" :key="instructionsArrayIndex">
									{{ instructionsArrayIndex + 1 }}.{{ instructionsArrayItem }}
								</li>
							</ul>
							<ul v-if="item.category.instructions" class="instructions line">
								<li v-for="(instructionsItem, index) in item.category.instructions.split(/[(\r\n)\n]+/)" :key="index">{{ instructionsItem }}</li>
							</ul>
						</el-card>
					</el-col>
					<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
						<el-card>
							<app-main-sub-title title="特权说明：" />
							<ul v-if="privilegeArray[index].length === 0 && !item.category.privilege" class="instructions">
								<li>暂无</li>
							</ul>
							<ul class="instructions">
								<li v-for="(privilegeArrayItem, privilegeArrayIndex) in privilegeArray[index]" :key="privilegeArrayIndex">
									{{ privilegeArrayIndex + 1 }}.{{ privilegeArrayItem }}
								</li>
							</ul>
							<ul v-if="item.category.privilege" class="instructions line">
								<li v-for="(privilegeItem, index) in item.category.privilege.split(/[(\r\n)\n]+/)" :key="index">{{ privilegeItem }}</li>
							</ul>
						</el-card>
					</el-col>
				</el-row>
			</div>
		</div>

		<!-- 排序弹框 -->
		<dialog-edit-card-order ref="dialogOrder" />
		<!-- 会员卡基础 -->
		<dialog-edit-card-basic ref="dialogCardBasic" />
		<!-- 会员卡开卡奖励 -->
		<dialog-edit-card-award ref="dialogCardAward" />
		<!-- 会员卡权益 -->
		<dialog-edit-card-rights ref="dialogCardRights" />
		<!-- 删除卡弹框 -->
		<dialog-del-card ref="dialogDelCard" />
	</div>
</template>

<script>
import { formatCardExplain } from '@/utils/format';
import { mapGetters } from 'vuex';
import { getVipCardList, changeVipCardStatus } from '@/api/vip';
import { getPointsConfig } from '@/api/points';
import { querySuperMemberStatus } from '@/api/business';
// 组件
import { DialogEditCardOrder, DialogEditCardBasic, DialogEditCardAward, DialogEditCardRights, DialogDelCard } from './components';
export default {
	components: {
		DialogEditCardOrder,
		DialogEditCardBasic,
		DialogEditCardAward,
		DialogEditCardRights,
		DialogDelCard
	},
	data() {
		return {
			// 状态
			loading: false,
			// 数据
			list: [], //  卡列表
			instructionsArray: [], // 使用说明
			privilegeArray: [], // 特权说明
			//超级会员
			superData: ''
		};
	},
	computed: {
		...mapGetters(['fileBaseUrl'])
	},
	mounted() {
		// 页面初始化
		this.initData();
	},
	methods: {
		/**
		 *  获取数据
		 */
		// 获取会员卡列表
		initData() {
			this.loading = true;
			getPointsConfig()
				.then(resConfig => {
					const enableConsumeBonus = resConfig.data.enablePoints && resConfig.data.enableConsumeBonus;
					getVipCardList()
						.then(res => {
							this.list = res.data;
							this.instructionsArray = [];
							this.privilegeArray = [];
							this.list.forEach((v, i) => {
								const result = formatCardExplain(v, enableConsumeBonus);
								this.instructionsArray.push(result.instructionsArray);
								this.privilegeArray.push(result.privilegeArray);
							});
						})
						.finally(() => {
							this.loading = false;
						});
				})
				.catch(err => {})
				.finally(() => {});
			// 查询超级会员状态
			querySuperMemberStatus().then(res => {
				this.superData = res.data;
			});
		},

		/**
		 *  按钮组
		 */
		// 暂停、启用卡
		changeStatus(item) {
			if (item.status) {
				this.$confirm('暂停后，顾客将不可继续开通此会员，已开通的会员不受影响，是否继续?', '暂停卡', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
					center: true,
					roundButton: true
				})
					.then(() => {
						this.changeCardStatus(item);
					})
					.catch(err => {});
			} else {
				this.changeCardStatus(item);
			}
		},

		// 请求暂停启用卡
		changeCardStatus(item) {
			const params = {};
			params.enableCategory = !item.status;
			params.categoryId = item.id;
			changeVipCardStatus(params).then(res => {
				item.status = !item.status;
				this.$notify({
					title: '成功',
					message: item.status ? '启用成功' : '停用成功',
					type: 'success',
					duration: 2000,
					offset: 40
				});
			});
		},

		// 删除卡
		del(item) {
			this.$refs.dialogDelCard.open({ id: item.id, name: item.categoryName }).then(() => {
				this.initData();
			});
		},

		// 跳转新增&编辑基础信息
		openEditCardBasic({ type = 'add', cardOrder = '', id = '', name = '', instructions = '' }) {
			const params = {};
			params.type = type;
			params.cardOrder = cardOrder;
			params.id = id;
			params.name = name;
			params.instructions = instructions;
			this.$refs.dialogCardBasic.open(params).then(() => {
				this.initData();
			});
		},

		// 跳转编辑开卡奖励
		openEditCardAward({ id, name }) {
			this.$refs.dialogCardAward.open({ id, name }).then(() => {
				this.initData();
			});
		},

		// 跳转编辑权益奖励
		openEditCardRights({ id, name, privilege }) {
			let superData = this.superData;
			this.$refs.dialogCardRights.open({ id, name, privilege, superData }).then(() => {
				this.initData();
			});
		},

		// 打开排序
		openDialogOrder() {
			this.$refs.dialogOrder.open().then(() => {
				this.initData();
			});
		}
	}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
/*  会员卡内容 */
.card {
	margin-top: 10px;
	&-box {
		min-width: 360px;
		margin-right: 30px;
		text-align: center;
	}
	&-img {
		width: 300px;
		height: 180px;
		margin-bottom: 10px;
		margin-left: 25px;
		img {
			border-radius: 6px;
		}
	}
	&-name {
		margin-bottom: 10px;
		font-size: 24px;
	}
	&-status {
		margin-bottom: 10px;
		font-size: 14px;
	}
	&-tips {
		overflow: hidden;
	}
	.btn-group {
		margin: 0 auto;
		// width: 350px;
	}
	/* 说明 */
	.instructions {
		overflow: hidden;
		margin-bottom: 10px;
		li {
			margin-bottom: 10px;
			font-size: 14px;
			color: #909399;
			word-break: break-all;
		}
	}
	.instructions.line {
		padding-top: 20px;
		border-top: 1px solid #e7e7e7;
	}
}
</style>
